import { Menu  } from 'antd';
import { Outlet,useNavigate } from "react-router-dom"
import type { MenuProps } from 'antd';
import { useEffect, useState } from "react"

import "./index.less"
const Main: React.FC = () => {
  const sideBarItems = [
    {
      label:'文章审核',
      key:'/articleManage'
    },
    {
      label:'权限管理',
      key:'/authorityManage'
    },
  ]
  const navigate = useNavigate()
  const [current, setCurrent] = useState('/articleManage');
  // 切换导航栏
  const onClick: MenuProps['onClick'] = async (e)=>{
    if(e.key === current) return
    setCurrent(e.key)
  }
  useEffect(()=>{
    navigate(`/home${current}`)
  },[current])
  return (
    <>
      <div id='main' className="main">
        <Menu
          onClick={onClick}
          style={{ width: '200px',height:'calc(100vh - 60px)'}}
          selectedKeys={[current]}
          mode="vertical"
          theme="dark"
          items={sideBarItems}
          getPopupContainer={function test(node) {
            return node.parentNode as HTMLElement;
          }}
        />
        <Outlet />
      </div>
    </>
  );
};

export default Main;